<template>
  <div>
    <div class="inner">
      <div>
        <!-- 主页头部搜索 -->
        <div class="topbox">
          <van-icon name="plus" size=".3rem" @click="Upload" />
          <van-search placeholder="请输入搜索关键词" class="search" />
          <van-icon name="bell" color="#EE87B6" size=".3rem" />
        </div>
        <!-- 轮播图 -->
        <div class="lb">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>

      <!-- icon图标 -->
      <van-grid>
        <van-grid-item
          icon="http://localhost:8080/img/tx/x1.png"
          text="新手指南"
          to="/guidebook"
        />
        <van-grid-item
          icon="http://localhost:8080/img/tx/x2.png"
          text="烘焙百科"
          to="/hongbei"
        />
        <van-grid-item
          icon="http://localhost:8080/img/tx/x3.png"
          text="每日签到"
          to="/qiandao"
        />
        <van-grid-item
          icon="http://localhost:8080/img/tx/x4.png"
          text="食谱分类"
          to="/class"
        />
      </van-grid>
      <!-- 3. -->
      <tab-page></tab-page>
      <div>
        <BottomBar></BottomBar>
      </div>
    </div>
    <div style="height: 0.8rem"></div>
  </div>
</template>

<script>
import BottomBar from "../components/bottombar";
import tabPage from "../components/main/tabPage.vue";

// 3. swipe
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);

export default {
  components: { BottomBar, tabPage },
  methods: {
    Upload() {
      this.$router.push({ path: "/jia" });
    },
  },
  data() {
    return {
      images: [
        "img/lb/lb01.jpg",
        "img/lb/lb02.jpg",
        "img/lb/lb03.jpg",
        "img/lb/lb04.jpg",
      ],
    };
  },
};
</script>

<style scoped>
.inner {
  width: 90%;
  margin: 0 auto;
}
.topbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search {
  width: 3rem;
}
.van-swipe {
  height: 2.1rem;
}
.lb img {
  width: 100%;
}
.fouricons {
  display: flex;
  justify-content: space-between;
}
.fouricons div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fouricons div span {
  margin-top: 0.08rem;
  color: #333;
}
</style>
